<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { reactive } from 'vue';
import { post, get } from '@/util/axios.js'
import router from '@/router'
import '@/util/baseStyle.css' 
import { useStore } from '@/stores';

const form = reactive({
  username: '',
  password: '',
  remember: false
})

const store = useStore()

const login = () => {
  if (!form.username || !form.password) {
    ElMessage.warning('用户名和密码不能为空')
  } else {
    post('/api/auth/login', {
        username: form.username,
        password: form.password,
        remember: form.remember
    }, (message) => {
      ElMessage.success(message)

      get('/api/user/me', (message) => {
        store.auth.user = message
        router.push('/index')
      }, () => {
        store.auth.user = null
      })
    })
  }
}
</script>

<template>
    <div style="text-align: center; margin: 0 20px;">
      <div class="bs-title">
        <div style="font-size: 25px; font-weight: 600;">WELCOME</div>
      </div>
      <div style="margin-top: 44px;">
        <el-input type="text" v-model="form.username" class="input" placeholder="username / email">
          <template #prefix>
            <el-icon><User/></el-icon> 
          </template> 
        </el-input>

        <el-input type="password" v-model="form.password" class="input" style="margin-top: 18px;" placeholder="password">
          <template #prefix>
            <el-icon><Lock/></el-icon>
          </template>
        </el-input>

        <div style="margin-top: 10px;">
          <el-row>
            <el-col :span="12" style="text-align: left;">
              <el-checkbox label="Remeber Me" v-model="form.remember"></el-checkbox>
            </el-col>
            <el-col :span="12" style="text-align: right;">
              <el-link @click="router.push('/forget')">forget Passowrd?</el-link> 
            </el-col>
          </el-row>
        </div>

        <div style="margin-top: 30px;">
          <el-button class="right-box_bBtn loginBtn" style="--bg: #b63a5a; --cl: #fff" @click="login">Login</el-button>
        </div>

        <el-divider>
          <span style="color: grey">OR</span>
        </el-divider>

        <div>
          <el-button class="right-box_bBtn signBtn" style="--bg: #986a99; --cl: #fcf6f8" @click="router.push('/register')">Sign</el-button>
        </div>
      </div>
    </div>
</template>

<style scoped>
.right-box_bBtn{
  width: 270px;
  background-color: var(--bg);
  color: var(--cl);
  outline: none;
  border: none;
  font-weight: bolder;
}

.loginBtn:hover{
  background-color: #da5b7b;
}

.signBtn:hover{
  background-color: #b289b3;
}

.input{
  height: 40px;
}
</style>
